<template>
    <my-dailog v-model:show="showFlag" :styleType="20" :showtopclose="true" @close="close">
        <cut-border-box>
            <div class="xzhbpopbox">
                <div class="choushoutypetitle" v-t="'sell.text7'">Please select a currency</div>
                <div class="bhxxft" v-if="settlementCurrency && settlementCurrency.length>0">
                    <van-radio-group v-model="currency" direction="horizontal">
                        <template v-for="dt in settlementCurrency" :key="dt">
                            <my-radio :name="dt">{{dt}}</my-radio>
                        </template>
                    </van-radio-group>
                </div>
                <div class="csfsBtnBox">
                    <my-button @click="onConfirm">{{text8}}</my-button>
                </div>
            </div>
        </cut-border-box>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {RadioGroup as vanRadioGroup} from 'vant'
import cutBorderBox from '@/components/cutBorderBox.vue' 
import myDailog from '@/components/myDailog.vue' 
import myRadio from '@/components/myRadio.vue'
import myButton from '@/components/myButton.vue'
import { toast } from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    components:{
        cutBorderBox,
        myDailog,
        vanRadioGroup,
        myRadio,
        myButton
    },
    props:{

    },
    emits:{  // teleport后，出发事件需要emits申明（vue3+）
        'confirm':null,
        'close':null
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            dtData:computed(()=>store.state.sell.nftdDetail),
            currency:'',
            showFlag:true,
            settlementCurrency:[],  // 结算货币ETH、USDT、CXT
            text8:t('sell.text8')
        })

        onMounted(()=>{
            if(state.dtData.settlementCurrency){
                state.settlementCurrency = state.dtData.settlementCurrency.split(',')
                state.currency = state.settlementCurrency[0]
            }else{
                // 默认
                state.settlementCurrency = ['CXT','ETH','USDT']
            }
        })

        const close = ()=>{
            context.emit('close')
        }

        const onConfirm = ()=>{
            if(!state.currency){
                return toast('Please select a currency')
            }
            context.emit('confirm',state.currency)
        }

        return{
            ...toRefs(state),
            close,
            onConfirm
        }
    }
}
</script>

<style lang="scss" scoped>
    .xzhbpopbox{
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        color: #FFFFFF;
        line-height: normal;
        padding: 30px ;
        min-height: 300px;
        min-width: 800px;
        .choushoutypetitle{
            font-size: 30px;
            padding: 0;
            text-align: center;
        }
        .bhxxft{
            display: flex;
            justify-content: center;
            padding: 40px 0 60px 0;
        }
        .csfsBtnBox{
            display: block;
            padding: 10px 0 0 0;
            width: 200px;
            margin: 0 auto;
        }
    }
</style>